<template>
  <div class="app-container home">


    <div
      style="margin-left: 20px;display: flex;flex-direction: column;background-color: #FFFFFF;margin-top: 10px"
    >
      <div class="intro-title"
           style=""
      >平台简介
      </div>
      <div class="intro-info"
           style=""
      >
        <span style="font-size: 14px">免费开源【欢迎star和fork项目,请点击下方按钮访问】</span>

      </div>
      <div style="margin-left: 10px;margin-right: 10px;margin-top: 15px">
        <p style="font-size: 16px;color: #666666;line-height: 25px;text-indent: 3em; "> &nbsp;&nbsp;
          火星源码低代码平台,致力于解放程序员的双手。前端采用VUE-ElementUI、
          Axios,后台采用SpringBoot、mysql代码易读易懂、界面简洁美观,不仅仅是一个后台开发框架,它是一个企业级快速开发解决方案,我们将把UI交互、快速开发能力追求到极致。
          适配国产数据库,消息中间件，将支持多租户、工作流，移动端UniApp,更多插件正在扩展中。
          当前版本:集成权限SpringSecurity、MybatisPlus、XxlJob、SpringAdmin监控平台、Kafka、Oss、WebSocket站内信等技术定期同步更新。
        </p>

      </div>

      <div
        style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-bottom: 20px"
      >
        <div class="gitee-btn"
             @click="toGitee"
        >
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px" icon-class="github-fill"/>
          访问码云
        </div>

        <div class="b-btn"
             @click="tobWebsite"
        >
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px" icon-class="upstage"/>
          我的B站
        </div>

        <div class="tech-btn"
             @click="toTechUrl"
        >
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px" icon-class="教程"/>
          搭建教程
        </div>
      </div>
    </div>
    <div
      style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;margin-left: 10px;margin-top: 20px"
    >
      <div style="width: 30%;height: 370px;background-color: #FFFFFF;margin-left: 10px">
        <div class="intro-title">
          技术选型
        </div>
        <div
          style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-left: 20px;margin-right: 20px"
        >
          <div style="background-color: #F7F9FA;width: 48%;height: 265px;border-radius: 20px;margin-top: 10px">
            <div style="text-align: center;margin-top: 20px;font-size: 16px;font-weight: bold">后端</div>
            <br/>
            <div style="margin-left: 20px;font-size: 14px">
              * Springboot<br/>
              * Mybatis-Plus<br/>
              * dynamic-datasource<br/>
              * Jackson高效可靠<br/>
              * Redisson支持单机、集群配置<br/>
              * Xxl-Job高性能 高可靠 易扩展<br/>
              * SpringBoot-Admin全方位服务监控<br/>
              * Validation 增强接口安全性<br/>
            </div>


          </div>


          <div style="background-color: #F7F9FA;width: 48%;height: 265px;border-radius: 20px;margin-top: 10px">
            <div style="text-align: center;margin-top: 20px;font-size: 16px;font-weight: bold">前端</div>
            <br/>
            <div style="margin-left: 20px;font-size: 14px">
              * Vue<br/>
              * VueX<br/>
              * css、html、js<br/>
              * ElementUI<br/>
              * Axios<br/>
              * Saas<br/>
              * flex响应式布局<br/>
            </div>


          </div>
        </div>

      </div>


      <div style="width: 30%;height: 370px;background-color: #FFFFFF;margin-left: 10px">
        <div class="intro-title">
          更多免费项目源码
        </div>
        <div
          style="background-color: #e6f7ff;border:1px solid #91d5ff;height: 40px;
          line-height: 40px;margin-top: 10px;margin-left: 10px;margin-right: 10px;padding-left: 10px"
        >
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px" icon-class="信息"/>
          免费项目源码上【源码字节】或【威客字节】小程序
        </div>
        <div
          style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-left: 20px;margin-right: 20px"
        >
          <div style="background-color: #F7F9FA;width: 48%;height: 265px;border-radius: 20px;margin-top: 10px">
            <div style="text-align: center;margin-top: 20px;font-size: 16px;font-weight: bold">源码字节</div>
            <br/>
            <div style="font-size: 14px;text-align: center">
              <img style="width: 65%;height: 65%;border-radius: 20px" src="../assets/image/ym-byte-mini.jpg" alt="">
            </div>


          </div>


          <div style="background-color: #F7F9FA;width: 48%;height: 265px;border-radius: 20px;margin-top: 10px">
            <div style="text-align: center;margin-top: 20px;font-size: 16px;font-weight: bold">威客字节</div>
            <br/>
            <div style="font-size: 14px;border-radius: 20px;text-align: center">
              <img style="width: 65%;height: 65%;border-radius: 20px" src="../assets/image/wk-byte-mini.jpg" alt="">
            </div>
          </div>
        </div>

      </div>
      <div style="width: 30%;height: 370px;background-color: #FFFFFF;margin-left: 10px">
        <div class="intro-title">
          作者信息
        </div>
        <div class="concat-content">
          作者: 源码字节 (Mars)
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px;cursor: pointer"
                    icon-class="user-info"
                    @click="getMineInfo"
          />
        </div>
        <div class="concat-content">
          <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
            <div>
              微信号: yuanmazijie-2022
            </div>
            <div style="margin-right: 10%">
              微信号: QQ项目交流群: 549943027
            </div>
          </div>

        </div>

        <div class="concat-content">
          我的技术领域: Java、Python、Web、小程序、爬虫等
        </div>
        <div class="concat-content">
          项目: <a href="https://gitee.com/Marsfactory/mars-code" target="_blank"><span style="color: red">mars-code中小企业快速开发平台</span></a>
        </div>
        <div
          style="margin-left: 20%;margin-right: 20%;display: flex;flex-direction: row;align-items: center;justify-content: space-between"
        >
          <div style="display: flex;flex-direction: column;align-items: center;margin-top: 10px">
            <img class="wechat-png" style="width: 100px;height: 100px;" src="../assets/image/wechat-iamge.png" alt="">
            <div style="margin-top: 10px;font-weight: bold">企业微信群</div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;margin-top: 10px">
            <img class="qq-png" style="width: 100px;height: 100px" src="../assets/image/qq-chat.jpg" alt="">
            <div style="margin-top: 10px;font-weight: bold">QQ技术群</div>
          </div>
        </div>

      </div>

    </div>



    <div
      style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;margin-left: 10px;margin-top: 20px"
    >
      <div style="width: 65%;height: 370px;background-color: #FFFFFF;margin-left: 10px">
        <div class="intro-title">
          全栈学成之路
        </div>
        <div
          style="background-color: #e6f7ff;border:1px solid #91d5ff;height: 40px;
          line-height: 40px;margin-top: 10px;margin-left: 10px;margin-right: 10px;padding-left: 10px"
        >
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px" icon-class="信息"/>
          Java基础+Java进阶+项目实战+Web前端+Flex响应适布局+Vue+Element等框架
          <span style="color: red">(加入企业微信获取源代码)</span>
        </div>

        <div style="height: 300px;margin-left: 30px;margin-top: 50px">
          <el-steps :active="1">
            <el-step title="第一阶段"
                     description="Java基础：从零基础角度出发，将Java基础内容分为两个阶段，详细讲解Java的基础知识，包括基本语法、面向对象程序设计、多线程、网络编程、IO等知识"
            ></el-step>
            <el-step title="第二阶段" style="color: #1ab394"
                     description="JavaWeb基础：全面覆盖JavaWeb阶段的学习知识，如数据库、JDBC、JavaWeb核心、前端技术、Tomcat、Linux、Ngnix，并通过一个旅游网的案例，巩固学习本阶段知识。"
            ></el-step>
            <el-step title="第三阶段" style="color: brown"
                     description="企业级开发—基础框架SSM、SpringBoot 微服务等学习掌握本阶段内容，可以快速、规范的开发中小型系统，例如： 外卖系统、租房系统技术点：项目构建Maven，从基础到高级，深入了解Maven项目的构建及管理方式。"
            ></el-step>
            <el-step title="第四阶段" description="大前端进阶：NodeJS、ES6详解、NPM详解、前端模块化开发、WebPack详解、Vue详解、Git详解"></el-step>
          </el-steps>
        </div>

      </div>

      <div style="width: 30%;height: 370px;background-color: #FFFFFF;margin-left: 10px">
        <div class="intro-title">
          联系我们
        </div>
        <div
          style="background-color: #e6f7ff;border:1px solid #91d5ff;height: 40px;
          line-height: 40px;margin-top: 10px;margin-left: 10px;margin-right: 10px;padding-left: 10px"
        >
          <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px" icon-class="信息"/>
          专业UI设计(5年)+高级前端Vue开发(6年)+全栈后台开发
        </div>

        <div class="concat-content" style="">
          【1】接YM-Byte-RuoYi系列架构的定制服务
        </div>

        <div class="concat-content">
          【2】接若依相关系列项目定制开发
        </div>
        <div class="concat-content">
          【3】接3个月以内工期的vue、springboot、cloud、小程序等软件定制开发
        </div>
        <div class="concat-content">
          【4】UI原型页面设计及切图服务
        </div>
        <div class="concat-content">
          【5】有意向请联系唯一指定联系人：源码字节（右侧扫码）
        </div>

      </div>
    </div>

    <el-divider/>
  </div>
</template>

<script>
import echarts from 'echarts'
import {getToken} from '@/utils/auth'

export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '4.2.0',
      tableData: [{
        avatar: 'http://i0.hdslb.com/bfs/face/8cec9d8843a6a9e6350fb14552234ca2ffdf1086.jpg',
        date: '2016-05-02',
        name: '陌小小的喵',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        avatar: 'http://i2.hdslb.com/bfs/face/eb101ef90ebc4e9bf79f65312a22ebac84946700.jpg',

        date: '2016-05-04',
        name: '最强老六',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        avatar: ' http://i0.hdslb.com/bfs/face/fb0338070aff54934708654e4cf0f608da77ca57.jpg',
        date: '2016-05-01',
        name: '杏肉干',
        address: '上海市普陀区金沙江路 1519 弄'
      }],
      colorList: ['#5584fd', '#3470ff', '#ff8801', '#00d6b9', '#7e3bf3'],
      websocket: null,
      gitUrl: 'https://gitee.com/Marsfactory/ym-ruo-yi-vue',
      bWebsite: 'https://space.bilibili.com/353034717?spm_id_from=333.1007.0.0',
      techUrl: 'https://www.bilibili.com/video/BV1jF411A7WQ?spm_id_from=333.999.0.0',
      dataList: [
        {
          path: '/java/base',
          icon: '代码',
          title: 'Java学习'
        },
        {
          path: '/web/webbase',
          icon: '代码',
          title: '前端学习'
        },

        {
          path: '/org/user',
          icon: 'peoples',
          title: '我的信息'
        },
        {
          path: '/studyRecord/studyRecord',
          icon: 'time',
          title: '学习记录'
        },

        {
          path: '/studyRecord/feedback',
          icon: '日志',
          title: '学习反馈'
        },

        {
          path: '/permission/role',
          icon: 'user',
          title: '角色管理'
        },
        {
          path: '/java/advance',
          icon: '代码',
          title: 'Java进阶'
        },
        {
          path: '/web/advance',
          icon: '菜单',
          title: '前端进阶'
        },
        {
          path: '/tool/gen',
          icon: '代码',
          title: '代码生成'
        },
        {
          path: '/log/operlog',
          icon: '日志',
          title: '日志管理'
        },
        {
          path: '/order/order',
          icon: 'table',
          title: '我的订单'
        },

        {
          path: '/tool/swagger',
          icon: 'swagger',
          title: '系统接口'
        }
      ]
    }
  },
  mounted() {
    let token = getToken()
    if (token) {
      if ('WebSocket' in window) {
        this.websocket = new WebSocket(process.env.VUE_APP_WEBSOCKET + '/api/pushMessage/' + token)
        this.initWebSocket()
      } else {
        this.$message.error('当前浏览器不支持WebSocket!!!')
      }
    }

    let chart = echarts.init(document.getElementById('main'))
    chart.setOption({
      title: {
        text: '用户访问来源',
        top: '5%',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: '15%',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '{b} : {c}'
              },
              labelLine: {show: true}
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function () {
      chart.resize()
    })

  },
  created() {

  },
  methods: {

    initWebSocket() {
      // 连接错误
      this.websocket.onerror = this.setErrorMessage
      // 连接成功
      this.websocket.onopen = this.setOnopenMessage
      // 收到消息的回调
      this.websocket.onmessage = this.setOnmessageMessage
      // 连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage
      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
      // 连接成功后 设置缓存
      localStorage.setItem('isWebsocketConnected', '1')

    },
    setErrorMessage() {
      window.console.log('WebSocket连接发生错误，状态码：' + this.websocket.readyState)
    },
    setOnopenMessage() {
      window.console.log('即时通讯连接成功，状态码：' + this.websocket.readyState)
    },
    setOnmessageMessage(event) {
      // 根据服务器推送的消息做自己的业务处理
      const h = this.$createElement
      window.console.log(event.data)
      const router = this.$router
      this.$notify({
        title: '站内信',
        message: h('p', [
          h('p', null, event.data),
          h('p', {
            style: 'text-align: right;width:195px;dispaly:block;margin-top: 8px;color:#43c39d;cursor: pointer'
          }, '点击查看详情')
        ]),
        position: 'bottom-right',
        type: 'success',
        onClick() {
          console.log(router)
          router.push('/notice/mail')
        }
      })
    },
    setOncloseMessage() {
      window.console.log('WebSocket连接关闭，状态码：' + this.websocket.readyState)
    },
    onbeforeunload() {
      this.closeWebSocket()
    },
    closeWebSocket() {
      this.websocket.close()
    },

    getMenuColor(index) {
      return this.colorList[index % 4]
    },
    toGitee() {
      window.open(this.gitUrl)
    },
    toTechUrl() {
      window.open(this.techUrl)
    },
    tobWebsite() {
      window.open(this.bWebsite)
    },
    intLine() {

    },
    getMineInfo() {
      this.$notify({
        title: '作者信息',
        message: '关注作者B站,实时查看项目更新',
        type: 'success'
      })
    },
    addTabMenu(path) {
      this.$router.push({
        path: path
      })
    },
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.concat-content {
  background-color: #f7f9fa;
  border: 1px solid #f7f9fa;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px
}

.wechat-png:hover {
  transition: all 0.2s ease-out 0s;
  transform: scale(1.1);
}

.qq-png:hover {
  transition: all 0.2s ease-out 0s;
  transform: scale(1.1);
}

.task-btn {
  height: 60px;
  background-color: #FFFFFF;
  border-radius: 10px;
  margin-left: 30px;
  cursor: pointer;
  margin-top: 5px
}


.task-btn:hover {
  transition: all 0.2s ease-out 0s;
  transform: scale(1.1);
}

.box-wapper {
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 15px;
  margin-top: 10px;
  margin-left: 10px;
}

.home {
  background-color: #F0F2F5;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .tech-btn {
    background-color: #9A8CF4;
    text-align: center;
    width: 20%;
    color: white;
    border-radius: 5px;
    margin-right: 5%;
    height: 40px;
    line-height: 40px;
  }

  .tech-btn:hover {
    width: 20%;
    color: #fffefe;
    border-radius: 5px;

    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.2s ease-out 0s;
    background-color: #b2abf6;
  }

  .b-btn {
    background-color: #fb7299;
    text-align: center;
    width: 20%;
    border-radius: 5px;
    color: white;
    height: 40px;
    line-height: 40px;
  }


  .b-btn:hover {
    color: #fffefe;
    width: 20%;
    cursor: pointer;
    border-radius: 5px;
    transform: scale(1.05);
    transition: all 0.2s ease-out 0s;
    background-color: #f3a3ba;
  }

  .intro-title {
    font-size: 16px;
    margin-left: 20px;
    margin-top: 20px;
    color: #000000D9;
    font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', DengXian, SimSun, 'Segoe UI', Tahoma, Helvetica, sans-serif;
    font-weight: bold
  }

  .intro-info {
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 20px;
    margin-top: 10px
  }

  .gitee-btn {
    background-color: #2f54eb;
    text-align: center;
    color: white;
    width: 20%;
    border-radius: 5px;
    margin-left: 5%;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
  }

  .gitee-btn:hover {
    cursor: pointer;
    width: 20%;
    border-radius: 5px;
    transform: scale(1.05);
    transition: all 0.2s ease-out 0s;
    background-color: #6e8bec;
  }


  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
